<template>
  <div class="content-wrapper">
    <!-- 表格组件 -->
    <div class="table-wrapper">
      <AvicTable
        ref="bpmPiProcess"
        table-key="bpmPiProcess"
        :columns="columns"
        :row-key="(record) => record.id"
        :data-source="list"
        :loading="loading"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          columnWidth: 40,
          fixed: true
        }"
        :show-custom-page-size="true"
        :page-parameter="queryParam.pageParameter"
        :total="totalPage"
        @change="handleTableChange"
        @refresh="getList"
      >
        <template #toolBarRight>
          <a-input-search
            class="opt-btn-commonsearch"
            style="width: 200px"
            placeholder="过程名称"
            title="过程名称"
            :allow-clear="true"
            @search="handleKeyWordQuery"
          />
        </template>
        <template #bodyCell="{ column, text, record, index }">
          <template v-if="column.dataIndex === 'id'">
            <span :title="index + 1 + queryParam.pageParameter.rows * (queryParam.pageParameter.page - 1)">
              {{ index + 1 + queryParam.pageParameter.rows * (queryParam.pageParameter.page - 1) }}
            </span>
          </template>
          <template v-else-if="column.dataIndex === 'dbid'">
            {{ record.dbid }}
          </template>
        </template>
      </AvicTable>
    </div>
  </div>
</template>
<script lang="ts" setup>
// 引入模块DTO
// 引入模块API
import { listSubBpmModelByPage } from '@/api/avic/bpmpi/ProcessModelApi';
const { proxy } = getCurrentInstance();
const $emit = defineEmits(['select']);
const props = defineProps({
  mainId: {
    type: String,
    required: true,
    default: ''
  }
});
const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    ellipsis: true,
    width: 60,
    align: 'center',
    fixed: 'left'
  },
  {
    title: '过程名称',
    dataIndex: 'name',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    fixed: 'left'
  },
  {
    title: '过程定义ID',
    dataIndex: 'pdId',
    ellipsis: true,
    minWidth: 150,
    resizable: true
  },
  {
    title: '排序',
    dataIndex: 'order',
    ellipsis: true,
    resizable: true,
    align: 'center',
    width: 80
  },
  {
    title: '当前版本',
    dataIndex: 'version',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'center'
  }
];
const queryForm = ref({ state: 'active', noEqualsId: null });
const queryParam = reactive({
  // 请求表格数据参数
  pageParameter: {
    page: 1, // 页数
    rows: proxy.$settings.table.pageSize || 20 // 每页条数
  },
  searchParams: {
    ...queryForm.value
  },
  keyWord: ref(''), // 快速查询数据
  sidx: null, // 排序字段
  sord: null // 排序方式: desc降序 asc升序
});
const list = ref([]); // 表格数据集合
const selectedRowKeys = ref([]); // 选中数据主键集合
const selectedRows = ref([]); // 选中行集合
const loading = ref(false);
const totalPage = ref(0);
const route = useRoute();
const dbid = route.params.id; // 获取页面参数id
onMounted(() => {
  // 加载表格数据
  getList();
});

/** 查询数据 */
function getList() {
  queryForm.value.noEqualsId = dbid;
  queryParam.searchParams = queryForm.value;
  selectedRowKeys.value = []; // 清空选中
  selectedRows.value = [];
  loading.value = true;
  listSubBpmModelByPage(queryParam)
    .then((response) => {
      list.value = response.data.result;
      totalPage.value = response.data.pageParameter.totalCount;
      queryParam.pageParameter.page = response.data.pageParameter.page;
      loading.value = false;
    })
    .catch(() => {
      list.value = [];
      totalPage.value = 0;
      loading.value = false;
    });
}
/** 快速查询逻辑 */
function handleKeyWordQuery(value) {
  queryParam.keyWord = value;
  queryParam.pageParameter.page = 1;
  getList();
}
/** 勾选复选框时触发 */
function onSelectChange(rowKeys, rows) {
  selectedRowKeys.value = rowKeys;
  selectedRows.value = rows;
  // 传出选中项
  $emit('select', selectedRows.value);
}
/** 表格排序 */
function handleTableChange(pagination, _filters, sorter) {
  queryParam.pageParameter.page = pagination.current;
  queryParam.pageParameter.rows = pagination.pageSize;
  if (proxy.$objIsNotBlank(sorter.field)) {
    queryParam.sidx = sorter.field;
    queryParam.sord = sorter.order === 'ascend' ? 'asc' : 'desc'; // 排序方式: desc降序 asc升序
  }
  getList();
}
watch(
  () => props.mainId,
  (newVal) => {
    if (newVal) {
      getList(); // 加载表格数据
    }
  },
  { immediate: true }
);
</script>
